import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import {Button, Col, Row, Table} from 'antd'
import * as actions from '../../actions/stack'
import '../../less/index.less'
import {FormattedMessage} from 'react-intl'
import moment from "moment";

class Stacks extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      page: 1,
      pageSize: 10,
      isDeleted: false,
      stackId: -1
    }
  }

  componentDidMount () {
    this.props.getStacks()
  }

  addStack () {
    this.props.history.push('/stacks/new')
  }

  render () {
    const pagination = {
      current: this.state.page,
      total: this.props.total,
      pageSize: this.state.pageSize,
      onChange: (page) => {
        this.setState({page})
        this.props.getStacks(page, this.state.pageSize)
      }
    }
    const columns = [{
      title: <FormattedMessage id='镜像' />,
      dataIndex: 'image'
    }, {
      title: <FormattedMessage id='创建者' />,
      dataIndex: 'maker',
      sorter: (a, b) => a.maker.length - b.maker.length
    }, {
      title: <FormattedMessage id='创建时间' />,
      dataIndex: 'createTime',
      render: (text) => <small>{moment(text).format('YYYY-MM-DD')}</small>
    }]
    return (<div>
      <Row>
        <Col span={8} offset={1}>
          <Button className='margin-b-2' type='primary' onClick={this.addStack.bind(this)}>
            <FormattedMessage id='新增' /></Button>
        </Col>
      </Row>
      <Table rowKey={record => record.id}
        columns={columns}
        dataSource={this.props.stacks}
        pagination={pagination}
        bordered
        className='table-center' />
    </div>)
  }
}

const mapStateToProps = ({stackData}) => ({
  total: stackData.stacks.totalElements,
  stacks: stackData.stacks.content,
  status: stackData.status
})

const mapDispatchToProps = (dispatch) => ({
  getStacks: (page, pageSize) => dispatch(actions.getAllStacksPage(page, pageSize)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Stacks))
